<template>
	<view class="box">
		<view class="wrap">
			<view class="top">
				<text>活力值余额</text>

			</view>
			<view class="center">
				<!-- <image :src="baseUrl + '/static/icon/greenintegral1.png'" mode=""></image> -->
				<text>{{info.rights.vitality}}</text>
			</view>
			<view class="btnc" @click="gomore">
				解冻More券			</view>
		</view>
		<view class="main">
			<!-- 			<view class="tit">
				变动时间
			</view>
			<view class="timewrap">
				<view class="timeitem">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date||"请选择"}}</view>
					</picker>

				</view>
				<text>至</text>
				<view class="timeitem">
					<picker mode="date" :value="date2" :start="startDate2" :end="endDate2" @change="bindDateChange2">
						<view class="uni-input">{{date2||"请选择"}}</view>
					</picker>
				</view>
			</view> -->
			<view class="tit">
				变动明细
			</view>
			<view class="wraps" v-for="item in lists" :key="item.id" @click="gochangedetail">
				<view class="wrapsleft">
					<view class="name">
						{{item.memo}}
					</view>
					<view class="time">
						{{item.create_time}}
					</view>
				</view>
				<view class="wrapsright">
					<text class="c1 ">{{item.money}}</text>
					<!-- <image :src="baseUrl + '/static/icon/right.png'" mode=""></image> -->
				</view>
			</view>
			<noDatas :xxxList="lists" :status="status"></noDatas>
		</view>
		<u-popup :show="flagrule" mode="center" @close="flagrule=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>
				<view class="popup-center">
					{{rule}}
				</view>

				<text class="btns" @click="flagrule=false">确定</text>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		scorelist,
		setting,
		userVitalityLoglist
	} from "../../api/other.js"

	import {
		dashboard
	} from "../../api/user.js"
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			const currentDate2 = this.getDate2({
				format: true
			})
			return {
				baseUrl: this.$imageBaseUrl,
				date: "",
				date2: "",
				info: {
					rights: {
						score: "",
						wait_score: ""
					}
				},
				page: 1,
				size: 50,
				status: "loadmore",
				lists: [],
				flagrule: false,
				rule: ""
			}
		},
		onLoad() {
			this.getlist()
			this.getdashboard()
			this.getrule()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			startDate2() {
				return this.getDate2('start');
			},
			endDate2() {
				return this.getDate2('end');
			}
		},
		methods: {
			gomore() {
				uni.navigateTo({
					url: "/pageUser/myuser/moreticket"
				})
			},
			getrule() {
				setting().then(res => {
					this.rule = res.data.agreement.wait_score
				})
			},
			getlist() {
				userVitalityLoglist({
					page: this.page,
					page_size: this.size,
					
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;

						this.lists = this.page == 1 ? list : this.lists.concat(list);
						console.log(this.lists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
					console.log(res)
				})
			},
			getdashboard() {
				dashboard().then(res => {
					this.info = res.data
				})
			},
			gochangedetail() {
				// uni.navigateTo({
				// 	url:"/pageUser/myuser/integralchangedetail"
				// })
			},
			gogreenintegralrule() {
				uni.navigateTo({
					url: "/pageUser/myuser/greenintegralrule"
				})
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				if (this.date && this.date2) {
					this.page = 1
					this.getlist()
				} else {
					if (!this.date) {
						uni.$u.toast("请选择初始时间")
					}
					if (!this.date2) {
						uni.$u.toast("请选择结束时间")
					}
				}
			},
			bindDateChange2: function(e) {
				this.date2 = e.detail.value
				if (this.date && this.date2) {
					this.page = 1
					this.getlist()
				} else {
					if (!this.date) {
						uni.$u.toast("请选择初始时间")
					}
					if (!this.date2) {
						uni.$u.toast("请选择结束时间")
					}
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDate2(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1 
				this.getlist()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		// height: 100vh;
		background: #F7F7F7;
	}

	.wrap {
		width: 690rpx;
		height: 194rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		position: relative;

		.top {
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;
			margin-left: 30rpx;

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.right {
				display: flex;
				align-items: center;

				>text {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}

				>image {
					width: 8rpx;
					height: 16rpx;
					margin-left: 16rpx;
					margin-right: 16rpx;
				}
			}
		}

		.center {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 34rpx;
			margin-left: 30rpx;

			>text {
				font-weight: 600;
				font-size: 48rpx;
				color: #333333;
			}

			>image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}


		}

		.bot {
			width: 640rpx;
			height: 70rpx;
			background: #F7F7F7;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 20rpx;

				>image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 16rpx;
				}
			}

			.rights {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				>image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.main {
		width: 690rpx;
		min-height: 1042rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.tit {
			padding-top: 30rpx;
			margin-left: 30rpx;
		}

		.timewrap {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 30rpx;

			.timeitem {
				width: 268rpx;
				height: 70rpx;
				background: #F7F7F7;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.wraps {
			width: 630rpx;
			height: 158rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wrapsleft {
				width: 450rpx;
				display: flex;
				flex-direction: column;

				.time {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.name {
					font-size: 32rpx;
					font-weight: 400;
					color: #333;
				}

			}

			.wrapsright {
				display: flex;
				align-items: center;

				.text1 {
					font-weight: 700;
					font-size: 30rpx;
					color: #FFC300;
				}

				.text2 {
					font-weight: 700;
					font-size: 30rpx;
					color: #E78C4C;
				}

				>image {
					width: 8rpx;
					height: 16rpx;
					margin-left: 16rpx;
				}
			}
		}
	}

	.uni-input {
		color: #999999;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		max-height: 800rpx;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding-bottom: 30rpx;

	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		width: 500rpx;
		// align-items: center;
		text-align: left;
		overflow: auto;
		line-height: 55rpx;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	.btnc {
		width: 184rpx;
		height: 56rpx;
		background: #FFC300;
		border-radius: 422rpx 422rpx 422rpx 422rpx;
		text-align: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 56rpx;
		position: absolute;
		bottom: 40rpx;
		right: 20rpx;
	}
</style>